import React from "react";
import { TabBar } from "antd-mobile";
import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline } from "antd-mobile-icons";
import { ISProduct } from "src/config";
import { locationShape, historyShape } from "src/propType";

function initStyle() {
    let style = {};
    if (ISProduct) {
        style = {
            top: 0,
        };
    } else {
        style = {
            bottom: 0,
        };
    }
    return style;
}

const _TabBar = porps => {
    const { location, history } = porps;

    const setRouteActive = value => {
        history.push(value);
    };

    const tabs = [
        {
            key: "/home",
            title: "首页",
            icon: <AppOutline />,
        },
        {
            key: "/message",
            title: "消息",
            icon: <MessageOutline />,
        },
        {
            key: "/me",
            title: "我的",
            icon: <UserOutline />,
            hidden: ISProduct,
        },
    ];

    return (
        <div className="navigation-bar" style={{ ...initStyle() }}>
            <TabBar activeKey={location.pathname || ""} onChange={value => setRouteActive(value)}>
                {tabs.map(
                    item =>
                        !item?.hidden && (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ),
                )}
            </TabBar>
        </div>
    );
};

_TabBar.propTypes = {
    history: historyShape,
    location: locationShape,
};

export default _TabBar;
